/*
<!-- template -->
<weui-dialog ref="dialog"></weui-dialog>

import modalDialog from '../../components/dialog'
components: {
  modalDialog
},
<!-- methods -->
this.$refs.dialog.confirm(this.phoneNumber || '手机号不能为空', {
  type: 'toast',
  title: '请输入正确的手机号'
  // okText: 'OK',
  // cancelText: 'NO',
  // noBtn: true,
  // noTitle: true
}).then(() => {
  // 点击确定按钮的回调处理
  callback()
}).catch(() => {
  // 点击取消按钮的回调处理
  callback()
})
 */
<template>
<div class="modal" v-show="show" transition="fade">
  <div v-if="opts.type === 'toast'" class="modal-toast"><div class="toast-info" v-html="content"></div></div>
  <div v-else>
    <div :class="{'weui-dialog': true, 'mod-qrcode': opts.isQRcode, 'reset-top': opts.type === 'alert'}">
      <div class="weui-dialog-hd" v-if="!opts.noTitle" v-html="opts.title"></div>
      <a @click="close(0)" class="close" href="javascript:void(0)"></a>
      <div class="weui-dialog-bd"v-if="opts.isQRcode"><img src="../assets/imgs/qrcode.jpg" width="100%"><p>长按二维码关注</p></div>
      <div class="weui-dialog-bd"v-else v-html="content"></div>
      <div class="weui-dialog-ft" v-if="!opts.noBtn">
        <slot name="button" v-if="opts.type === 'confirm'">
          <a href="javascript:void(0)" class="modal-btn" :class="opts.cancelButtonClass" @click="close(1)">{{opts.cancelText}}</a>
          <a href="javascript:void(0)" class="modal-btn modal-btn-primary" :class="opts.okButtonClass" @click="submit">{{opts.okText}}</a>
        </slot>
        <slot name="button" v-if="opts.type === 'tips'">
          <a href="javascript:void(0)" class="modal-btn modal-btn-primary full-button" :class="opts.okButtonClass" @click="submit">{{opts.okText}}</a>
        </slot>
      </div>
      <slot name="button" v-if="opts.type === 'alert'">
        <a href="javascript:void(0)" class="dialogCloseBtn" @click="submit(1)"></a>
      </slot>
    </div>
    <div v-show="show" class="modal-maks" transition="fade"></div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'dialog',
    data () {
      return {
        show: false,  // 是否显示模态框
        content: '',  // 要显示的内容
        opts: {
          type: 'alert',  // alert、confirm、toast
          noTitle: false,
          title: '',  // 标题
          nobtn: false,  // 无任何按钮
          okText: '确定', // 确定按钮文字
          cancelText: '取消',  // 取消按钮文字
          cancelButtonClass: '', // 取消按钮样式
          okButtonClass: '' // 确定按钮样式
        },
        resolve: '',
        promise: '', // 保存promise对象
        timer: null
      }
    },
    methods: {
      confirm (content, opts) {
        this.content = content
        this.opts = {...this.opts, ...opts}
        this.show = true
        // toast set
        if (this.opts.type === 'toast') {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.show = false
            this.resolve('submit')
            clearTimeout(this.timer)
          }, 3000)
        }
        this.promise = new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
        return this.promise // 返回promise对象,给父级组件调用
      },
      //  确定,将promise断定为完成态
      submit () {
        this.opts.isQRcode = false
        this.resolve('submit')
        this.show = false
      },
      close (type) {
        this.opts.isQRcode = false
        this.show = false
        this.reject(type)
      }
    }
  }
</script>

<style>
</style>
